<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-10-21 17:44:41
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-29 10:31:00
 * @FilePath: \hy-ui\src\views\trainingCenter\components\backstageHome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="backstageHome">
    <div class="top">
      <div class="planAndExam item">
        <div class="title">
          <span class="text">培训计划</span>
          <span class="trendRise">较上周<span>+1.4%</span></span>
        </div>
        <div class="itemStatistics">
          <div>
            <span>覆盖人次</span>
            <span>999</span>
          </div>
          <div>
            <span>学习人次</span>
            <span>78</span>
          </div>
          <div>
            <span>完成人次</span>
            <span>0</span>
          </div>
        </div>
        <div class="btmStatistics">
          <div class="btmStatisticsLeft">
            <div>
              <span>培训总量</span>
              <span>36</span>
            </div>
            <div>
              <span>本月新增</span>
              <span>0</span>
            </div>
            <div>
              <span>完成率</span>
              <span>0%</span>
            </div>
          </div>
          <img src="../../../assets/images/line1.png" alt="" />
        </div>
      </div>
      <div class="planAndExam item">
        <div class="title">
          <span class="text">考试情况</span>
          <span class="trendDescend">较上周<span>+1.4%</span></span>
        </div>
        <div class="itemStatistics">
          <div>
            <span>覆盖人次</span>
            <span>999</span>
          </div>
          <div>
            <span>学习人次</span>
            <span>78</span>
          </div>
          <div>
            <span>通过人次</span>
            <span>0</span>
          </div>
        </div>
        <div class="btmStatistics">
          <div class="btmStatisticsLeft">
            <div>
              <span>培训总量</span>
              <span>36</span>
            </div>
            <div>
              <span>本月新增</span>
              <span>0</span>
            </div>
            <div>
              <span>通过率</span>
              <span>0%</span>
            </div>
          </div>
          <img src="../../../assets/images/line2.png" alt="" />
        </div>
      </div>
      <div class="know item">
        <div class="title"><span class="text">知识情况</span></div>
        <div style="position: relative">
          <div ref="knowRef" style="width: 100%; height: 217px"></div>
          <div class="legend">
            <div><span></span><span>知识总量</span><span>36</span></div>
            <div><span></span><span>本月新增</span><span>0</span></div>
          </div>
        </div>
      </div>
      <div class="student item">
        <div class="title"><span class="text">学员总数</span></div>
        <div class="progressMain">
          <div class="progressSvg">
            <el-progress
              type="circle"
              :percentage="100"
              color="#FFAD38"
              stroke-width="20"
              width="140"
              :format="formatProgress"
            ></el-progress>
          </div>
          <div class="progressLegend">
            <div></div>
            <div><span>学员总数</span><span>2545</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="btm-left">
        <div class="title">学习分析</div>
        <div class="learningAnalytics" ref="learningAnalytics"></div>
      </div>
      <div class="btm-right">
        <div class="title">
          <span>学习排行榜</span
          ><i class="el-icon-more" style="color: #b6b6b6"></i>
        </div>
        <div class="leaderboard">
          <div class="leaderboard-taps">
            <el-radio-group v-model="activeName">
              <el-radio-button label="1">考试排行</el-radio-button>
              <el-radio-button label="2">培训排行</el-radio-button>
            </el-radio-group>
          </div>
          <div class="leaderboard-list">
            <div
              class="leaderboard-item"
              v-for="(item, index) in list"
              :key="index"
            >
              <div>
                <img
                  v-if="[0, 1, 2].includes(index)"
                  :src="require(`../../../assets/images/top${index + 1}.png`)"
                  alt=""
                />
                <span v-else class="sort">{{ index + 1 }}</span
                ><span class="itemName">{{ item.name }}</span>
              </div>
              <span>{{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
export default {
  mixins: [resize],
  data() {
    return {
      chart1: null,
      chart2: null,
      activeName: "1",
      list: [
        {
          name: "周拉拉1",
          num: "56",
        },
        {
          name: "周拉拉2",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
        {
          name: "周拉拉3",
          num: "56",
        },
      ],
    };
  },
  beforeDestroy() {
    if (!this.chart1) {
      return;
    }
    this.chart1.dispose();
    this.chart1 = null;
    if (!this.chart2) {
      return;
    }
    this.chart2.dispose();
    this.chart2 = null;
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1();
      this.initChart2();
    });
  },
  methods: {
    initChart1() {
      this.chart1 = echarts.init(this.$refs.knowRef, "macarons");
      this.setOptions1();
    },
    setOptions1() {
      this.chart1.setOption({
        backgroundColor: "#fff",
        angleAxis: {
          show: false,
          max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
          type: "value",
          startAngle: 180, //极坐标初始角度
          splitLine: {
            show: false,
          },
        },
        barMaxWidth: 20, //圆环宽度
        radiusAxis: {
          show: false,
          type: "category",
        },
        //圆环位置和大小
        polar: {
          center: ["50%", "75%"],
          radius: "250%",
        },
        series: [
          {
            type: "bar",
            data: [
              {
                //上层圆环，显示数据
                value: 90,
                // max=100
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#678BFA",
                      },

                      {
                        offset: 1,
                        color: "#678BFA",
                      },
                    ],
                  },
                },
              },
            ],

            barGap: "-100%", //柱间距离,上下两层圆环重合
            coordinateSystem: "polar",
            roundCap: true, //顶端圆角
            z: 3, //圆环层级，同zindex
          },

          {
            //下层圆环，显示最大值
            type: "bar",
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#0BC96F",
                  borderWidth: 0,
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            roundCap: true,
            z: 1,
          },
        ],
      });
    },
    initChart2() {
      this.chart2 = echarts.init(this.$refs.learningAnalytics, "macarons");
      this.setOptions2();
      window.addEventListener("resize", function () {
        chart1.resize();
        chart2.resize();
      });
    },
    setOptions2() {
      this.chart2.setOption({
        backgroundColor: "#fff",
        grid: {
          top: "70",
          left: "50",
          right: "7%",
          bottom: "30",
          containLabel: true,
        },
        legend: {
          show: false,
          data: ["学习人数", "考试人数"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          backgroundColor: "rgba(255,255,255,0.8)",
          formatter: function (params) {
            var lines = [];
            params.forEach(function (param) {
              var line = param.seriesName + ": " + param.value;
              lines.push(line);
            });
            return `<div style="background:#fff"><div style="color:#FFAD38;font-size:14px">${lines[0]}</div><div style="color:#4772B4;font-size:14px">${lines[1]}</div></div>`;
          },
        },
        xAxis: [
          {
            nameGap: 5,
            name: "（时间）",
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#AEAEAE",
              },
            },
            axisLabel: {
              color: "#9B9B9B",
              fontSize: "14",
              margin: 20,
            },
            axisTick: {
              show: false,
            },
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "#9eaaba",
            },
            offset: 0,
            name: "（人数）",
            nameTextStyle: {
              color: "#9B9B9B",
            },

            type: "value",
            axisLabel: {
              show: true,
              color: "#9B9B9B",
              fontSize: "14",
              margin: 20,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "#E6E6E6",
              },
            },
          },
        ],
        series: [
          {
            name: "学习人数",
            type: "bar",
            barWidth: 30,
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              color: "#5894FC",
              lineStyle: {
                width: 1,
                type: "solid",
              },
              barBorderRadius: [40, 40, 40, 40],
            },
            data: [393, 438, 485, 631, 689, 524, 687, 535, 642, 812, 521, 356],
          },
          {
            name: "考试人数",
            type: "line",
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              color: "#FFAD38",
              borderColor: "#f0f",
            },
            label: {
              show: false,
              position: "top",
              color: "#FFAD38",
            },
            itemStyle: {
              color: "#FFAD38",
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            data: [393, 438, 485, 631, 389, 224, 287, 135, 298, 564, 475, 531],
          },
        ],
      });
    },
    formatProgress() {
      return "2545人";
    },
  },
};
</script>

<style lang="scss" scoped>
.backstageHome {
  background: #f0f3f6;
  padding: 20px 34px 0 20px;
  min-height: calc(100vh - 90px);
  .top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 22px;
    grid-row-gap: 23px;
    justify-items: stretch;
    align-items: start;
    margin-bottom: 22px;
    .item {
      background: #fff;
      border-radius: 10px;
      height: 100%;
      padding: 20px 10px 10px 10px;
      .title {
        display: flex;
        align-items: flex-end;
        padding-left: 10px;
        .text {
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          margin-right: 15px;
        }
        .trendRise {
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          span {
            color: #4ec90f;
            margin-left: 6px;
            position: relative;
            &::after {
              content: "";
              display: inline-block;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              border-bottom: 6px solid #4ec90f;
              border-top: 6px solid transparent;
              position: absolute;
              right: -17px;
            }
          }
        }
        .trendDescend {
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          span {
            color: #f56c6c;
            margin-left: 6px;
            position: relative;
            &::after {
              content: "";
              display: inline-block;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              border-bottom: 6px solid transparent;
              border-top: 6px solid #f56c6c;
              position: absolute;
              right: -17px;
              top: 4px;
            }
          }
        }
      }
      .itemStatistics {
        display: flex;
        justify-content: space-around;
        margin-top: 25px;
        margin-bottom: 30px;
        div {
          display: flex;
          flex-direction: column;
          span:nth-of-type(1) {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-bottom: 13px;
          }
          span:nth-of-type(2) {
            font-weight: 400;
            font-size: 18px;
            color: #000000;
          }
        }
      }
      .btmStatistics {
        background: #f6faff;
        border-radius: 10px;
        padding: 25px 0 25px 25px;
        display: flex;
        .btmStatisticsLeft {
          display: flex;
          width: calc(100% - 125px);
          justify-content: space-around;
          div {
            display: flex;
            flex-direction: column;
            span:nth-of-type(1) {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              margin-bottom: 9px;
            }
            span:nth-of-type(2) {
              font-weight: 400;
              font-size: 18px;
              color: #000000;
            }
          }
        }
        img {
          width: 100px;
          height: 39px;
        }
      }
    }
    .know {
      .legend {
        background: #f8f9ff;
        border-radius: 5px;
        padding: 12px 18px;
        width: 145px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -30%);
        div {
          display: flex;
          align-items: center;
          & > span:nth-of-type(1) {
            border-radius: 3px;
            width: 11px;
            height: 11px;
            margin-right: 6px;
          }
          & > span:nth-of-type(2) {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 14px;
          }
          & > span:nth-of-type(3) {
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            margin-left: 10px;
            line-height: 16px;
          }
        }
        div:nth-of-type(1) {
          & > span:nth-of-type(1) {
            background: #678bfa;
          }
          margin-bottom: 12px;
        }
        div:nth-of-type(2) {
          & > span:nth-of-type(1) {
            background: #0bc96f;
          }
        }
      }
    }
    .student {
      .progressMain {
        display: flex;
        align-items: center;
        margin-top: 36px;
        margin-left: 60px;
        ::v-deep .el-progress__text {
          font-size: 16px;
          color: #000000;
        }
        .progressLegend {
          background: #f8f9ff;
          border-radius: 5px;
          margin-left: 26px;
          padding: 9px 20px;
          display: flex;
          & > div:nth-of-type(1) {
            background: #ffad38;
            border-radius: 3px;
            width: 11px;
            height: 11px;
            margin-right: 11px;
          }
          & > div:nth-of-type(2) {
            display: flex;
            flex-direction: column;
            span:nth-of-type(1) {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 14px;
              margin-bottom: 7px;
            }
            span:nth-of-type(2) {
              font-weight: 400;
              font-size: 14px;
              color: #000000;
            }
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 540px;
    display: flex;
    .title {
      font-weight: 400;
      font-size: 18px;
      color: #000000;
      line-height: 18px;
      padding: 23px 31px 17px 20px;
      border-bottom: 1px solid rgb(226, 226, 226, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btm-left {
      background: #fff;
      border-radius: 10px;
      height: 100%;
      margin-right: 22px;
      width: calc((100% - 66px) / 4 * 3 + 44px);
      .learningAnalytics {
        width: 100%;
        height: calc(100% - 59px);
      }
    }
    .btm-right {
      background: #fff;
      border-radius: 10px;
      height: 100%;
      width: calc((100% - 66px) / 4 * 1);
      .leaderboard {
        padding: 17px 21px 0 21px;
        .leaderboard-taps {
          display: flex;
          justify-content: center;
          padding-bottom: 19px;
          border-bottom: 1px solid rgb(226, 226, 226, 0.5);
          ::v-deep .el-radio-group {
            width: 100%;
          }
          ::v-deep .el-radio-button {
            width: 50%;
            height: 40px;
            .el-radio-button__inner {
              width: 100%;
              background: #f2f3f5;
              font-size: 14px;
              color: #6d7882;
              box-shadow: none;
            }
          }
          ::v-deep .is-active {
            .el-radio-button__inner {
              width: 100%;
              background: #fff;
              font-size: 14px;
              color: #3186f7;
              border: 1px solid #dcdfe6;
            }
          }
        }
        .leaderboard-list {
          height: 400px;
          overflow: auto;
          & .leaderboard-item:nth-child(even) {
            background: #f3f7f8;
          }
          .leaderboard-item {
            padding: 14px 26px 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            & > div {
              display: flex;
              align-items: center;
              img {
                margin-right: 29px;
              }
              .sort {
                margin-right: 29px;
                font-weight: 400;
                font-size: 16px;
                color: #70787a;
                display: inline-block;
                width: 17px;
                text-align: center;
              }
              .itemName {
                font-weight: 400;
                font-size: 16px;
                color: #333333;
              }
            }
            & > span {
              font-weight: 400;
              font-size: 18px;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
</style>